<div data-role=page data-dom-cache="false" id=home style="background-color: #f0eff6">
	<div data-role=header data-theme=b data-add-back-btn=true>
		<h1>Mistake Chasing Game</h1>
	</div>
	<div data-role=content id="rrr">
	<ul class="back countdown">
		<li> <span class="hours">00</span>
			<p class="hours_ref">hours</p>
		</li>
		<li class="seperator">:</li>
		<li> <span class="minutes">00</span>
			<p class="minutes_ref">minutes</p>
		</li>
		<li class="seperator">:</li>
		<li> <span class="seconds">00</span>
			<p class="seconds_ref">seconds</p>
		</li>
	</ul>
		<p class="text" style="background-color: #e8eef2; border-radius: 10px; border: 1px #8ad4fe solid; position: absolute: top: 50%; margin-top: 5px;" id="question_number" >Question</p>
		<textarea style="background-color: #e8eef2; border-radius: 10px; border: 1px #8ad4fe solid; position: absolute: top: 50%; margin-top: 5px; " id="question">Put Text here</textarea>
		<span class="text" style="font-size: 18px; color: blue; padding: 13px 0px; margin-left: 10px"> Choose the true answer : </span>
		<select data-native-menu=false id="select">
		</select>
		<p>
			<a href=# data-role=button data-theme=e data-icon=check id=next_question> Next Question
			</a>
		</p>
		<div id=question_status_list style = "margin: 0 auto">
			
		</div>
	</div>
	<div data-role=footer data-theme=b data-position="fixed">
		<h1>Mistake Chasing Game (c) 2013</h1>
	</div>

	<div data-role="popup" id="popupBasic">
		<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
		<p>Question ? <br />answered by ?</br>at ?<p>
	</div>
	<script>
	//make 10 button to present 10 question status...
	for (var i = 1; i <= 10; i++) {
		$("#question_status_list").append("<a href=# data-rel=popup data-role=button data-theme=e data-icon=info data-inline=true id=b" + i + ">" + i + "</a>");
	}
	
	var total_my_question = 0;
	var client_current_question_order = 1; //it is correspond to auto_id in question_list (initual value = 1, not 0)
	var seconds = 2000;
	var countdownTimer;
	var countdownTimer2;

	function secondPassed() {
	var minutes = Math.round((seconds - 30)/60);
	var remainingSeconds = seconds % 60;
	if (remainingSeconds < 10) {
		remainingSeconds = "0" + remainingSeconds; 
	}
	if (minutes < 10) {
		minutes = "0" + minutes;
	}
	$(".minutes").text(minutes);
	$(".seconds").text(remainingSeconds);
	if (seconds == 0) {
		clearInterval(countdownTimer);
		loadQuestion();
	} else {
		seconds--;
	}
};
	
	//first load question after showing gameplay page
	loadFirstQuestion = function() {
		var question_info = {
			email: sessionStorage.getItem("email")
		};
		$.ajax({
		     url:"http://127.0.0.1:81/Game/game_starter.php",
		     dataType: 'jsonp',
			 data: question_info,
		     success: function(json){
				client_current_question_order = json.auto_id;
		    	$("#question_number").text("Question: " + (++total_my_question) + "/10" + ": " + "Java Programming");
		    	$("#question").text(json.question);
		    	var str = json.answer_list.split(" ");
		    	for (var i = 0; i < str.length; i++) {
		    		$("#select").append("<option value=" + str[i] + ">" + str[i] + "</option>");
		    	}
		    	$("#select").selectmenu("refresh", true);
		    	countdownTimer = setInterval('secondPassed()', 1000);
		     },
		     error:function(){ //khoi tao lan dau bi loi, hoac reset lai session browser cung bi loi
		         alert("Error0");
		     }      
		});
	};
	
	//get current question and answer that user input
	
	//load question for next
	loadNextQuestion = function() {
		var question_info = {
			email: sessionStorage.getItem("email"),
			current_question_order: client_current_question_order,
			answer:$("#select").val()
		};
		
		$.ajax({
		     url:"http://127.0.0.1:81/Game/gameplay.php",
		     dataType: 'jsonp',
			 data: question_info,
		     success: function(json){
		    	if (json.success == 3) {
					clearInterval(countdownTimer);
		    		$.mobile.changePage ("result.html");
					sessionStorage.setItem("total", total_my_question);
		    		return;
		    	}
				client_current_question_order = json.auto_id;
		    	$("#question_number").text("Question: " + (++total_my_question) + "/10" + ": " + "Java Programming");
		    	$("#question").text(json.question);
		    	var str = json.answer_list.split(" ");
				$("#select").html("");
		    	for (var i = 0; i < str.length; i++) {
		    		$("#select").append("<option value=" + str[i] + ">" + str[i] + "</option>");
		    	}
		    	$("#select").selectmenu("refresh", true);
		     },
		     error:function(){
		         alert("Error1");
		     }      
		});
	};
	
	$("#next_question").bind("click", function() {
		loadNextQuestion();
	});
	
	loadFirstQuestion();
	var i = 0;
	function secondPassed2() {
		$.ajax({
			 url:"http://127.0.0.1:81/Game/temp_play_history.php",
			 dataType: 'jsonp',
			 success: function(json){
				if (json.true_false_value == 1) {
					$("#b" + json.q_id).buttonMarkup({ icon: "check" });
					$("#b" + json.q_id).css('background-color', 'green');
				} else if (json.true_false_value == 0) {
					$("#b" + json.q_id).buttonMarkup({ icon: "delete" });
					$("#b" + json.q_id).css('background-color', 'red');
				}
			 },
			 error:function(){
				 alert("Error2");
			 }      
		});
	};
	countdownTimer2 = setInterval('secondPassed2()', 5000);
</script>
</div>
